<html>
    <head>
        <title>Ecommer</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/easySlider1.7.js"></script>
        <script>
            //var product_id;
            var number_item = 0;
            function convert_number(number){
                    number = number.toString();
                    var str = '';
                    var length = number.length;
                    var i = 0;
                    var x = 0;
                    for(i = length - 1; i >= 0; i--){
                        x++;
                        if(i == 0){
                            str = number.substr(0,x)+ str;
                        }  
                        if(x == 3 && i != 0){
                            x = 0;
                            str = ','+ number.substr(i,3)+ str;
                        }
                             
                    }
                    str = str + ' '+' '+ '( VNĐ )';
                    return str;
                }//------end function convert number()--------------------------
            $(function(){
                $.ajax({
                    url:'check_session.php',
                    type:'POST',
                    data:{
                        status: 1
                    },
                    success:function(data){
                        number_item = data;
                        $('.cart-status').text(number_item+ ' ' + 'item');
                    }
                })
            })
            $(function(){
                $('#main-menu li a').last().css({
                    'border-right':'none'
                })
            })
            $(function(){
                $('#slide').easySlider({
                    auto: true,
                    continuous: true
                })
            })
            $(function(){
                $('.product-img').click(function(){
                    $('#add-cart').fadeIn(0);
                    var large_img = $(this).attr('src');
                    $('.large-img').attr('src',large_img);
                    product_id = $(this).parent().attr('id');
                    $.ajax({
                        url:'show_product_detail.php',
                        type:'POST',
                        data:{
                            product_id: product_id
                        },
                        success:function(data){
                            var data = $.parseJSON(data);
                            $('ul.small-img li').remove();
                            var i;
                                for(i in data.img_name){
                                    $('ul.small-img').append(" <li class = 'small-images'><img src='images/product/"+data.img_name[i]+"'/></li>");
                                };
                                
                                //$('ul.small-img').append("<li><img src='images/product/'"+data.img_name['1']+"'' /></li>") ;
                                //$('ul.small-img').append(" <li><img src='images/product/"+data.number_record+"' /></li>");
                            
                            

                        }
                    })
                    //end pos ajax
                    $('#opacity').css({
                        'display':'block'
                    })
                    $('.product-show').fadeIn(400)
                })
                $('#opacity').click(function(){
                    $(this).css({
                        'display':'none'
                    })
                    $('.product-show').fadeOut(400)
                })
            })
            $(function(){
                
                var x = 0;
                    $('#left').click(function(){
                        stop();
                        x = x - 124
                        $('.small-img').animate({
                            'margin-left' : x
                        })
                        $(thís).stop();
                    })
                     
                    $('#right').click(function(){
                        stop();
                        if(x<0){
                           x = x + 124
                            $('.small-img').animate({
                                'margin-left' : x
                            }) 
                        }
                        
                        
                    })
                    var y;
                $('.small-img').on('click','li img',function(event){
                    y = $(this).attr('src');
                    $('.large-img').attr('src',y);
                })
                
            })
            //add to cart----------------------------------
            $(function(){
                
                $('#add-cart').click(function(){
                    $.ajax({
                        url:'shopping_cart.php',
                        type:'POST',
                        data:{
                            product_id: product_id
                        },
                        success:function(data){
                            if(data == 1){
                                alert('Hiện sản phẩm này đã hết hàng');
                            }
                        }
                    })
                    $.ajax({
                    url:'check_session.php',
                    type:'POST',
                    data:{
                        status: 1
                    },
                    success:function(data){
                        number_item = data;
                        $('.cart-status').text(number_item+ ' ' + 'item');
                    }
                })
                })
            })
            $(function(){
                $('#add-cart').click(function(){
                    $(this).fadeOut(200)
                })
            })
            $(function(){
                var total_money = 0;
                $('#view-cart').click(function(){
                    $('#number-item font').text(number_item);
                    total_money = 0;
                    $('.wrap-item').remove();
                    $('#opacity').css({
                        'display':'block'
                    })
                    $('#wrap-shopping-cart').fadeIn(400);
                    $('.title-shopping-cart').fadeIn(400);
                    $('.title-2').fadeIn(400);
                    $.ajax({
                        url:'show_cart.php',
                        type:'POST',
                        data:{
                            show_cart: 1
                        },
                        success:function(data){
                            var data = $.parseJSON(data);
                            //console.log(data);
                            var item_price= 0;
                            for(i1 in data.product){
                                for(i2 in data.product[i1]){
                                    $('#wrap-shopping-cart').append("<div class='wrap-item'></div>");
                                    $('.wrap-item').last().attr('num-ses',data.product[i1][i2].num_ses);
                                    $('.wrap-item').last().append("<img src='images/product/"+data.product[i1][i2].pro_img+"' />");
                                    $('.wrap-item').last().append("<h3 class='item_name'>"+data.product[i1][i2].pro_name+"</h3>");
                                    item_price = data.product[i1][i2].pro_price_sell;
                                    
                                    $('.wrap-item').last().append("<h3 class='item_price'>"+convert_number(item_price)+"</h3>");
                                    $('.wrap-item').last().append("<h3 class='num-pro'>"+data.product[i1][i2].num_pro+"</h3>");
                                    var money1 = 0;
                                    money1 = data.product[i1][i2].num_pro * data.product[i1][i2].pro_price_sell;
                                    $('.wrap-item').last().append("<h3 class='total-child'>"+convert_number(money1)+"</h3>");
                                    $('.wrap-item').last().append("<p class='delete-item' total-price = "+money1+"  num-ses = '"+data.product[i1][i2].num_ses+"'></p>");
                                    total_money = total_money + (data.product[i1][i2].num_pro * data.product[i1][i2].pro_price_sell);                          
                                }
                            }
                            $('.total-price font').text(convert_number(total_money));
                        }
                    })
                    
                    
                })
                $(function(){
                    $('#wrap-shopping-cart').on('click','.wrap-item .delete-item',function(even){
                        var num_ses = $(this).attr('num-ses');
                        var total_price = $(this).attr('total-price');
                        $(this).parent().fadeOut(100);
                        total_money = total_money - total_price;
                        $('.total-price font').text(convert_number(total_money));
                        $.ajax({
                            url:'delete_session.php',
                            type:'POST',
                            data:{
                                num_ses: num_ses
                            },
                            success:function(data){
                                
                            }
                        })
                        $.ajax({
                            url:'check_session.php',
                            type:'POST',
                            data:{
                                status: 1
                            },
                            success:function(data){
                                number_item = data;
                                $('.cart-status').text(number_item+ ' ' + 'item');
                                $('#number-item font').text(number_item);
                            }
                        })
                        
                        //$(this).parent().remove();
                    })
                    
                })
                $('#opacity').click(function(){
                    $(this).css({
                        'display':'none'
                    })
                    $('#wrap-shopping-cart').fadeOut(500);
                    $('.title-shopping-cart').fadeOut(600);
                    $('.title-2').fadeOut(600);
                })
            })
        </script>
    </head>
    <body>
        <div id="opacity"></div>
            <div class="title-shopping-cart">
                <h1>Shopping Cart</h1>
                <p id="number-item">Tổng số sản phẩm: <font></font></p>
                <p class="total-price">Tổng số tiền : <font></font></p>
                <a href="#" id="payment">Thanh Toán</a>
            </div>
            <div class="title-2">
                <p class="text2-1">Hình ảnh</p>
                <p class="text2-2">Tên sản phẩm</p>
                <p class="text2-3">Giá sản phẩm</p>
                <p class="text2-4">Số lượng</p>
                <p class="text2-5">Thành tiền</p>
            </div>
            <div id="wrap-shopping-cart">
                
            </div><!--end wrap-shopping-cart-->
            <div class="product-show">
                <div class="pro-slide-show">
                    <img class="large-img" src="" />
                    <ul class="small-img">
                        
                    </ul>
                    <span id="left"></span>
                    <span id="right"></span>
                </div>
                
                <p class="product-show-info">Thông Tin Sản Phẩm</p>
                <p style="padding: 15px;
                            display: block;
                            overflow: hidden;
                            width: 260px;
                            height: 276px;">
                    Bộ sản phẩm gồm có:

                    Giường ngủ 1.8m đỏ trắng/A63 /200*180*28.5 A524-23-0232
                    
                    Táp đầu giường dỏ trắng/A01/56*39*48 A524-18-0173
                    
                    Tủ quần áo 5 cánh hoa đỏ trắng/A63  A524-17-0208
                    
                    Bàn trang điểm đỏ trắng/A13 A524-03-0008
                    
                    Ghế đỏ trắng/A13/ A524-28-0004
                    
                    Xuất xứ: Hàng nhập khẩu
                    
                    Giá cũ: 22.740.000 VND khuyến mại - 15%
                    
                    Giá mới: 19.329.000 VND
                    
                    Thông tin vận chuyển

                    Miễn phí vận chuyển và lắp đặt trong nội thành Hà Nội (khách hàng trả thêm 7000VNĐ/Km ngoài địa phận Hà Nội)
                </p>
                <p id="add-cart"></p>
                <a href="#" id="detail"></a>
            </div>
        <div id="outer">
            <div id="wraper">   
                <div id="header">
                    <div class="height47"></div>   
                    <a href="index.php" id="logo"></a>
                    <div id="shopping-cart">
                        <span class="text1-1">SHOPPING CART :</span>
                        <span class="cart-status">Empty</span>
                        <span id="view-cart">view cart</span>
                    </div>
                    <div class="height6"></div>
                    <ul id="main-menu">
                        <li><a href="index.php">Home</a></li>
                        <li><a href="#">News</a></li>
                        <li><a href="#">Specials</a></li>
                        <li><a href="#">All Product</a></li>
                        <li><a href="#">FAQS</a></li>
                        <li><a href="#">Contact us</a></li>
                        <div id="wrap-seach">
                            <input type="text" id="seach" />
                            <div id="icon1"></div>
                        </div>
                    </ul><!--end main-menu-->
                </div><!--end header-->
                <div id="banner">
                <!-- bat dau sile show-->
                    <div id="slide">
                        <ul>
                            <li><img src="images/product/1.jpg" /></li>
                            <li><img src="images/product/2.jpg" /></li>
                            <li><img src="images/product/3.jpg" /></li>
                            <li><img src="images/product/4.jpg" /></li>
                            <li><img src="images/product/5.jpg" /></li>
                            <li><img src="images/product/6.jpg" /></li>
                            <li><img src="images/product/7.jpg" /></li>
                            <li><img src="images/product/8.jpg" /></li>
                        </ul>
                    </div>
                    
                <!--ket thuc slide show-->
                </div><!--end banner-->
                <div id="content">
                    <div id="content-left">
                        <div id="block1" class="block-style1">
                            <p class="title-style1">CATEGORIES</p>
                            <ul id="menu-left">
                                <li>
                                    <a href="#">Living</a>
                                    <ul>
                                        <li><a href="#">Sofas</a></li>
                                        <li><a href="#">Sleeper Sofas</a></li>
                                        <li><a href="#">Lounge Chairs</a></li>
                                        <li><a href="#">Side Tables</a></li>
                                        <li><a href="#">Ottomans</a></li>
                                    </ul>
                                    <li><a href="#">Dining</a></li>
                                    <li><a href="#">Bedroom</a></li>
                                    <li><a href="#">Neo classical</a></li>
                                    <li><a href="#">Patio</a></li>
                                    <li><a href="#">Accessories</a></li>
                                    <li><a href="#">KMP Exclusives</a></li>
                                    <li><a href="#">Storage</a></li>
                                    <li><a href="#">Lighting</a></li>
                                    <li><a href="#">Kids's Furniture</a></li>
                                </li>
                            </ul><!--end menu-left-->
                        </div>
                        
                    </div><!--end content-left-->
                    <div id="content-right" class="block-style1">
                        <p class="title-style1  ">FEATURED PRODUCTS</p>
                        <div id="main-content">
                            <?php include_once('show_product_index.php');?>
                        </div>
                    </div><!--end content-right-->
                </div><!--end content-->
            </div><!--end wraper-->
        </div><!--end outer-->
            
    </body>

</html>